<template>
	<view class="container">
		
		<view class="title">
		  <view class="font-36 text-bold c-base">健康监测 保障健康</view>
		  <view class="font-24 c-base">全面健康监测，为健康生活筑牢保障根基</view>
		  <image :src="$util.img('image/monitor_1.png')" mode="" class="icon"></image>
		</view>
		
		<block v-for="(item,index) in infoList" :key="index">
			<view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24">
				<text class="line"></text>
				{{item.name}}
			</view>
		
			<view class="boxPanel flex-between" v-for="(opitem,opindex) in item.list" :key="opindex">
				<view class="font-weight-5 flex-y-baseline" style="width:28%;">
					{{opitem.name}}
					<text class="c-a4">({{opitem.default_unit}})</text>
				</view>
				<view>{{opitem.now_value}}</view>
				<view class="flex-y-center">
				<input type="number" v-model="opitem.min_value" disabled placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
				<u-line color="#172140" length="46rpx"></u-line>
				<input type="number" v-model="opitem.max_value" disabled  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
				</view>
			</view>
		</block>
		
		<!-- <view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24">
			<text class="line"></text>
			基础数据
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				体重
				<text class="c-a4">(kg)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				血压
				<text class="c-a4">(mmHg)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24">
			<text class="line"></text>
			心血管数据
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				心率
				<text class="c-a4">(次/分钟)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				体脂率
				<text class="c-a4">(%)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				腰围
				<text class="c-a4">(cm)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				肺活量
				<text class="c-a4">(次)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view> -->
		
		<view class="warnbtn" @click="$util.redirectTo('/otherpages/health/warn')">
		  <image :src="$util.img('/image/monitor_2.png')" mode=""></image>
		  设置预警值
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoList: []
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getUserAlert",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.infoList = res.data;
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
// 顶部
.title {
  position: relative;
  padding: 0 24rpx 80rpx;
  background: $color-title2;
  .icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 261rpx;
    height: 178rpx;
  }
}

.line {
	display: inline-block;
	width: 7rpx;
	height: 30rpx;
	border-radius: 0 10rpx 10rpx 0;
	background: $color-title2;
	margin-right: 18rpx;
}

.boxPanel {
	padding: 30rpx 24rpx;
	.inputs {
		font-size: 28rpx;
		color: #B8BAC2;
	}
}

.warnbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 252rpx;
    height: 87rpx;
    border-radius: 60rpx;
    color: #fff;
    background: #FF4D21;
	margin: 50rpx 248rpx;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
}
</style>
